<template>
    <el-dialog
            title="新增广告"
            :close-on-click-modal="false"
            :visible.sync="showAddModal"
            @close="cancel"
            width="500px"
    >
        <div class="wrap" v-loading="loading" :element-loading-text="loadingText">
            <el-form
                    ref="addFormRef"
                    :model="addForm"
                    :rules="addFormRules"
                    label-width="100px"
            >
                <el-form-item label="广告类型:" prop="value">
                    <el-select v-model="addForm.value" size="small" placeholder="请选择广告类型">
                        <el-option label="首页banner" value="10006001"/>
                        <el-option label="启动页广告" value="10006002"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="广告名称:" prop="adImgName">
                    <el-input
                            v-model="addForm.adImgName"
                            style="width: 100%;"
                            size="small"
                            placeholder="请输入广告图片名称"
                            clearable
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="广告图片:" prop="adImgUrl">
                                        <EUploadImgs :limit="1" v-model="addForm.adImgUrl" @file-upload="onUplodPicSuccess" />
                </el-form-item>
                <el-form-item label="链接类型:" prop="urlType">
                    <el-select v-model="addForm.urlType" size="small">
                        <el-option label="无" value="0"/>
                        <el-option label="外部链接" value="1"/>
                        <el-option label="视频链接" value="2"/>
                        <el-option label="内部链接" value="3"/>
                        <el-option label="公告" value="4"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                        v-if="addForm.urlType == '1' || addForm.urlType == '3'"
                        label="链接地址:"
                        prop="linksUrl"
                        :rules="[{ required: (addForm.urlType == '1' || addForm.urlType == '3') ? true : false , message: '请输入广告链接地址！' }]"
                >
                    <el-input
                            v-model="addForm.linksUrl"
                            style="width: 100%;"
                            size="small"
                            placeholder="请输入广告链接地址"
                            clearable
                    >
                    </el-input>
                </el-form-item>
                <el-form-item
                        v-else-if="addForm.urlType == '5'"
                        label="公告链接:"
                        prop="linksUrl"
                        :rules="[{ required: addForm.urlType == '4' ? true : false , message: '请选择链接商品！' }]"
                >
                    <el-select
                            size="small"
                            style="width: 100%;"
                            v-model="addForm.linksUrl"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请输入公告名称进行搜索"
                            :remote-method="onSearchNotice"
                            :loading="searchNoticeLoading"
                    >
                        <el-option
                                v-for="item in noticeList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                        v-show="addForm.value == '10050005'"
                        label="弹窗频次:"
                        prop="winFrequencyType"
                        :rules="[{ required: addForm.value == '10050005' ? true : false , message: '请设置首页弹窗频次！' }]"
                >
                    <el-select v-model="addForm.winFrequencyType" size="small">
                        <el-option label="每天首次打开APP弹窗" value="0"/>
                        <el-option label="每次打开APP弹窗" value="1"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="广告状态:" prop="status">
                    <el-radio-group v-model="addForm.status">
                        <el-radio label="0">上架</el-radio>
                        <el-radio label="1">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上架时间:" prop="publishTime">
                    <el-date-picker
                            size="small"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="addForm.publishTime"
                            type="datetime"
                            placeholder="请选择上架时间"/>
                </el-form-item>
                <el-form-item label="下架时间:" prop="recallTime">
                    <el-date-picker
                            size="small"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="addForm.recallTime"
                            type="datetime"
                            placeholder="选择下架时间"/>
                </el-form-item>
                <el-form-item label="权重" prop="level">
                    <el-input-number
                            size="small"
                            v-model="addForm.level"
                            controls-position="right"
                            :min="1"
                    >
                    </el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="footer_dialog">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="onEdit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import {_addAd} from '_api'
    import moment from 'moment'
    import EUploadImgs from '_c/EUploadImgs'
    export default {
        components: {
            EUploadImgs
        },
        data() {
            return {
                ShowFilelist: false,
                showAddModal: false,
                loading: false,
                searchNoticeLoading: false,
                noticeList: [],
                searchLoading: false,
                loadingText: '加载广告数据中...',
                shopNames: [],
                addForm: {
                    type: 'ad_type',
                    value: '10050001',
                    adImgName: '',
                    status: '0',
                    adImgUrl: '',
                    publishTime:'',
                    recallTime:  '',
                    level: '',
                    urlType: '0',
                    videoUrl: '',
                    linksUrl: '',
                    winFrequencyType: '0'
                },
                addFormRules: {
                    value: [{required: true}],
                    type: [{required: true}],
                    adImgName: [{required: true, message: '请输入广告图片名称'}],
                    status: [{required: true}],
                    adImgUrl: [{required: true, message: '请上传图片或等待图片上传到服务器！'}],
                    publishTime: [{required: true, message: '请选择上架时间'}],
                    recallTime: [{required: true, message: '请选择下架时间'}],
                    level: [{required: true}],
                    urlType: [{required: true}]
                }
            }
        },

        methods: {
            cancel() {
                this.loading = false
                this.showAddModal = false
                this.$refs.addFormRef.resetFields()
            },
            onSearchNotice(name) {
                if (name) {
                    this.searchNoticeLoading = true
                    this.$http.post('/cms/auth/notice/listNoticeName', name).then(res => {
                        this.noticeList = res.data.list
                        this.searchNoticeLoading = false
                    })
                } else {
                    this.noticeList = []
                }
            },
            // 保存修改
            onEdit() {
                this.$refs.addFormRef.validate((valid) => {
                    if (valid) {
                        if (moment(this.addForm.recallTime).isBefore(this.addForm.publishTime)) {
                            this.$message.error('下架时间不能在上架时间之前!')
                            return
                        }
                        let postData = JSON.parse(JSON.stringify(this.addForm))
                        if (postData.value != '10050005') delete postData.winFrequencyType
                        this.loading = true
                        this.loadingText = '提交数据中...'
                        _addAd(postData).then(res => {
                            this.$message.success(res.msg)
                            this.$emit('refresh')
                            this.cancel()
                        }).catch(() => {
                            this.loading = false
                        })
                    }
                })
            },
            // 上传图片
            onUplodPicSuccess (imgs) {
                this.addForm.adImgUrl = imgs[0]
            },
            onUplodFileSuccess (fileUrl) {
                this.ShowFilelist = true
                this.addForm.videoUrl = fileUrl
            }
        }
    }
</script>
